<template>
  <div class="base-content weixin-pro-authorize">
    <div class="box-wrap">
      <div class="img-wrap">
        <span class="img-url url0">{{webchatUrl}}</span>
        <img src="../../../../../assets/img/weChatProAuthorize1.png" class='weixin-open' alt=""/>
      </div>
      <ul class="img-list">
        <li>业务域名配置入口图片示例
          <div class="img1">
            <span class="img-url url1">{{webchatUrl}}</span>
            <span class="img-url url1-1">{{webchatUrl}}</span>
          </div>
        </li>
        <li>查看配置业务域名图片示例
          <div class="img2">
            <span class="img-url url2">{{webchatUrl}}</span>
          </div>
        </li>
        <li>查看小程序接入在线咨询链接图片示例
          <div class="img3">
            <p class="img-url url3">{{webchatUrl}}/wapchat.html?accessId=6e318840-f191-11e5-bde0-d39f2deffb4a&fromUrl=设置您自己的来源</p>
          </div>
        </li>
      </ul>
    </div>
     <affix label="授权列表"></affix>
     <div class="add-program">
      <el-button type="primary" class="primary_btn" @click.stop="smsTempEditShow">添加小程序信息</el-button>
    </div>
    <!--添加小程序信息 start========================================================-->
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" class="add-program-dialog" title="添加小程序信息" :visible.sync="isSmsTempEditShow" @close="editTempDialogClose">
      <el-form :model="weixinForm" :rules="rules" ref="weixinForm" label-width="130px" label-position="top">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="'小程序名称：'" prop="displayName">
              <el-input size="mini" v-model.trim="weixinForm.displayName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="isAddOrEdit === 'add'">
          <el-col :span="24">
            <el-form-item :label="'校验文件名：'" prop="upload">
                <el-upload
                  class="temp-upload"
                  :action="uploadUrl"
                  accept=".txt"
                  :data="uploadHeaders"
                  :with-credentials="true"
                  :on-error="removeUploadList"
                  :on-remove="removeUploadList"
                  :on-success="uploaded"
                  ref="upload"
                  name="upload"
                  >
                  <el-button class="small_btn" size="mini">上传校验文件</el-button><span style="font-size: 12px;margin-left:10px;">(大小不超过1K)</span>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-else>
          <el-col :span="24">
            <el-form-item :label="'校验文件名：'" prop="robot">
              <el-input size="mini" v-model.trim="weixinForm.file" auto-complete="off" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col>
            <div class="fr" style="margin-top:20px;">
              <el-button class="primary_btn" @click="isSmsTempEditShow = false">取消</el-button>
              <el-button class="primary_btn" type="primary" @click="submitUpload">确定</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!--添加小程序信息 end========================================================-->
     <div class="tables">
      <div class="deploy">
        <span class="icon-text" @click.stop="queryWeixinProList"><i class="iconfont icon-shuaxin"></i>刷新</span>
        <Pagination
          class="fr"
          :small="true"
          :currentPage="currentPage"
          :count="count"
          :pageSize="limit"
          @turnPage="handleCurrentChange"
          :totalPage="Math.ceil(count/limit)"
        >
        </Pagination>
      </div>
      <!-- 搜索结果  表格 start========================================================-->
      <el-table :data="tableData" stripe style="width: 100%" size="mini">
        <el-table-column prop="displayName" label="小程序名称" width="">
        </el-table-column>
        <el-table-column prop="fileName" label="校验文件名">
        </el-table-column>
        <el-table-column  label="操作" width="180">
          <template scope="scope">
            <a style="margin-right: 10px;" @click="editWeixinPro(scope.row)">修改</a>
            <a class="red" @click="delWeixinPro(scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <!-- 搜索结果  表格 end========================================================-->
    </div>
  </div>
</template>
<script>
  import affix from '../../../../ui-modules/affix/Affix.vue'
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    name: 'wechatOpen',
    data () {
      return {
        tableData: [],
        currentPage: 1,
        limit: 10,
        count: 0,
        isSmsTempEditShow: false,
        weixinForm: {
          displayName: '',
          file: ''
        },
        rules: {
          displayName: [
            { required: true, message: '必填', trigger: 'blur' }
          ]
        },
        uploadUrl: '/fileUpload',
        uploadHeaders: {
          type: 'undefined',
          module: '',
          sessionId: this.$store.state.session.sessionId
        },
        isAddOrEdit: '',
        currentEditId: '',
        filePath: '',
        fileName: '',
        webchatUrl: ''
      }
    },
    components: {
      affix,
      Pagination
    },
    methods: {
      handleCurrentChange (val) {
        this.currentPage = val
        this.queryWeixinProList()
      },
      submitUpload () {
        let self = this
        if (this.isAddOrEdit === 'add') {
          this.$refs['weixinForm'].validate((valid) => {
            if (valid) {
              if (!self.filePath) {
                self.$message.error('请先上传校验文件！')
                return
              } else {
                let data = {'filePath': self.filePath, 'fileName': self.fileName, 'displayName': self.weixinForm.displayName}
                self.$store.dispatch('addWeixinMiniAppCheckFile', data).then((resp) => {
                  if (resp && resp.success) {
                    self.queryWeixinProList()
                    self.isSmsTempEditShow = false
                    self.$message({
                      message: '添加成功！',
                      type: 'success'
                    })
                  } else {
                    if (resp.message === 'unknow error!') {
                      self.$message.error('服务异常！')
                    }
                    self.$refs.upload.clearFiles()
                  }
                })
              }
            }
          })
        } else {
          this.$refs['weixinForm'].validate((valid) => {
            if (valid) {
              let data = {'_id': self.currentEditId, 'displayName': self.weixinForm.displayName}
              self.$store.dispatch('updateWeixinMiniAppCheckFile', data).then((resp) => {
                if (resp && resp.success) {
                  self.queryWeixinProList()
                  self.isSmsTempEditShow = false
                  self.$message({
                    message: '修改成功！',
                    type: 'success'
                  })
                } else {
                  if (resp.message === 'unknow error!') {
                    self.$message.error('服务异常！')
                  }
                }
              })
            }
          })
        }
      },
      editTempDialogClose () {
        this.isSmsTempEditShow = false
      },
      smsTempEditShow () {
        this.isAddOrEdit = 'add'
        if (this.$refs['weixinForm']) {
          this.$refs['weixinForm'].resetFields() // 表单重置
        }
        if (this.$refs.upload) {
          this.$refs.upload.clearFiles()
        }
        this.weixinForm.displayName = ''
        this.filePath = ''
        this.fileName = ''
        this.isSmsTempEditShow = true
      },
      delWeixinPro (row) {
        let data = {'_id': row._id}
        this.$confirm(this.$t('config.channel.warnDelWeixinPro'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delWeixinMiniAppCheckFile', data).then((resp) => {
            if (resp && resp.success) {
              this.queryWeixinProList()
              this.$message({
                message: this.$t('config.channel.deleteSuccess'),
                type: 'success'
              })
            } else {
              this.$message({
                message: this.$t('config.channel.deleteFailure'),
                type: 'error'
              })
            }
          })
        }).catch(() => {
          console.log('取消')
        })
      },
      queryWeixinProList () {
        let page = this.currentPage || 1
        let data = {'page': page, 'limit': 10}
        this.$store.dispatch('getWeixinMiniAppCheckFileList', data).then((resp) => {
          if (resp && resp.success) {
            this.count = resp.count
            this.tableData = resp.data || []
          }
        })
      },
      uploaded (response, file, fileList) {
        this.filePath = ''
        this.fileName = ''
        this.isSmsTempEditShow = true
        if (response && response.filePath) {
          let fileName = /[^.]+$/.exec(response.fileName)
          if (fileName && fileName[0] === 'txt') {
            if (file.size > 1024) { // 最多上传1K
              this.$message.error('文件大小不可超过1K')
              this.$refs.upload.clearFiles()
              return false
            } else if (file.size <= 0) {
              this.$message.error('上传文件不能为空')
              this.$refs.upload.clearFiles()
              return false
            }
            this.filePath = response.filePath
            this.fileName = response.fileName
          } else {
            this.$message.error(this.$t('sms.uploadFileWrong'))
            this.$refs.upload.clearFiles()
            return false
          }
        } else {
          this.$message.error('上传失败！')
          this.$refs.upload.clearFiles()
          return false
        }
      },
      removeUploadList () {
        this.$refs.upload.clearFiles()
      },
      editWeixinPro (row) {
        let data = {'_id': row._id}
        this.currentEditId = row._id
        this.isAddOrEdit = 'edit'
        if (this.$refs['weixinForm']) {
          this.$refs['weixinForm'].resetFields() // 表单重置
        }
        this.$store.dispatch('getWeixinMiniAppCheckFile', data).then((resp) => {
          if (resp.success) {
            this.weixinForm.displayName = resp.data.displayName || ''
            this.weixinForm.file = resp.data.fileName || ''
            this.isSmsTempEditShow = true
          }
        })
      },
      getwebchatUrl () {
        this.$store.dispatch('queryWebchat', {}).then((resp) => {
          console.log(resp)
          if (resp.success) {
            this.webchatUrl = resp.webchatUrl
          }
        })
      }
    },
    beforeMount () {
      this.queryWeixinProList()
      this.getwebchatUrl()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .base-content
    height: calc(100vh - 200px)
    padding 20px
    overflow-y auto
    .box-wrap
      position relative
      width 100%
      margin-bottom  60px
      .img-url
        position absolute
        font-size 12px
        color $cf-gray4
      .url0
        left 505px
        top 35px
      .weixin-open
        width 100%
      .img-list
        display flex
        justify-content space-between
        padding 40px 20px 0
        margin-bottom 20px
        font-size 14px
        list-style none
        color $c-main
        li
          position relative
          padding 1px 0
          border-bottom 1px solid $c-main
          cursor pointer
          div
            display none
            position absolute
            z-index 111
          .img1
            width 446px
            height 380px
            top -380px
            background url(../../../../../assets/img/weChatProAuthorize2.jpg) no-repeat center center/cover
            .url1
              top 90px
              left 35px
            .url1-1
              top 274px
              left 95px
          .img2
            width 580px
            height 327px
            top -327px
            left -210px
            background url(../../../../../assets/img/weChatProAuthorize3.jpg) no-repeat center center/cover
            .url2
              top 191px
              left 120px
          .img3
            width 829px
            height 382px
            top -382px
            right 0
            background url(../../../../../assets/img/weChatProAuthorize4.jpg) no-repeat center center/cover
            .url3
              top 317px
              left 98px
              width 652px
              color $c-main
              transform scale(.8)
          &:hover
            div
             display block
    .add-program-dialog
      width 800px
      margin auto
      li
        margin-bottom 15px
        .program-name
          width 202px
          height 24px
          padding 0 4px
          border 1px solid #ddd
          border-radius 2px
    .tables
      padding 16px 0 0
      .deploy
        height 48px
        line-height 48px
        border 1px solid #ebebeb
        border-bottom none
        padding-left 14px
        .fr
          padding-top 10px
          height 38px
      .red
        color $c-pink
    .ui-affix
      padding-bottom 0
    .add-program
      text-align right
    .icon-text
      margin-right 8px
      cursor pointer
      line-height 30px
    .icon-shuaxin
      color $c-main
      font-size 12px
      margin-right 2px
    .img-wrap
      position relative
      width 800px
      margin 30px auto
</style>




















